<template>
  <div class="box section clearfix">
    <el-form :inline="true" style="text-align: left" ref="query" :model="query">
      <el-form-item>
        <el-button
          icon="el-icon-circle-plus-outline"
          size="small"
          type="primary"
          @click="addFun"
          v-no-more-click
          >添加</el-button
        >
      </el-form-item>
    </el-form>
    <el-table :data="tableData" border stripe style="width: 100%">
      <el-table-column
        prop="extensionName"
        label="推广名称"
        align="center"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        prop="icon"
        label="图标地址"
        align="center"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        prop="secondText"
        label="第二文本标题"
        align="center"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        prop="thirdTest"
        label="第三文本标题"
        align="center"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        prop="type"
        label="类型"
        align="center"
        :show-overflow-tooltip="true"
        :formatter="extensionStatusFormat"
      />
      <el-table-column
        prop="createTime"
        label="创建时间"
        align="center"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        prop="updateTime"
        label="更新时间"
        align="center"
        :show-overflow-tooltip="true"
      />
      <el-table-column fixed="right" label="操作" width="200" align="center">
        <template slot-scope="scope">
          <el-button
            type="text"
            size="small"
            @click="addIconFun(scope.row)"
            v-no-more-click
            >图标</el-button
          >
          <el-button
            type="text"
            size="small"
            @click="detailsFun(scope.row)"
            style="color: #ffa42f"
            v-no-more-click
            >修改</el-button
          >
          <el-popconfirm
            title="确定删除此数据吗？"
            @onConfirm="deleteFun(scope.row)"
          >
            <el-button
              slot="reference"
              type="text"
              size="small"
              style="color: #fb575e"
              v-no-more-click
              >删除</el-button
            >
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <!--分页控件-->
    <div class="pagination">
      <span class="title">小计：共{{ this.total }}条数据</span>
      <el-pagination
        background
        layout="total,prev, pager, next, sizes"
        :total="total"
        :page-size="query.pageSize"
        :current-page.sync="currentPage"
        :page-sizes="[10, 20, 30, 40]"
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
      >
      </el-pagination>
    </div>
    <el-dialog
      :title="title"
      :visible.sync="ExtensionDia"
      append-to-body
      width="50%"
      top="30px"
      :before-close="handleClose"
    >
      <ExtensionDia
        v-if="ExtensionDia"
        :form="form"
        :extensionData="extensionData"
        @closeDia="closeDia"
      ></ExtensionDia>
    </el-dialog>
    <!-- 图标 -->
    <el-dialog
      title="上传图标"
      :visible.sync="IconDia"
      append-to-body
      width="30%"
      top="30px"
      center
    >
      <el-upload
        class="avatar-uploader"
        action=""
        :show-file-list="false"
        :limit="1"
        :http-request="uploadHttp"
      >
        <img v-if="imageUrl" :src="imageUrl" class="avatar" />
        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
      </el-upload>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="subimUpload">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  getCorePage,
  getEmployee,
  deleteCore,
  postCoreIcon,
} from "../../../src/assets/js/api";
import ExtensionDia from "../../components/system/ExtensionDia";

export default {
  name: "Extension",
  components: { ExtensionDia },
  data() {
    return {
      query: {
        pageSize: 10,
        pageNo: 1,
      },
      tableData: [],
      total: 10,
      pages: 0,
      currentPage: 1,
      ExtensionDia: false,
      IconDia: false,
      extensionData: [],
      title: "",
      addForm: {
        extensionName: "",
        secondText: "",
        thirdTest: "",
        type: "",
      },
      imageUrl: "",
      uploafFile: {},
      IconId: "",
    };
  },
  created() {
    this.getList();
    this.getExtension();
  },
  methods: {
    //   获取数据
    getList() {
      getCorePage(this.query).then((res) => {
        if (res.code == 200) {
          this.tableData = res.data.records;
          this.currentPage = res.data.current;
          this.total = res.data.total;
          this.pages = res.data.pages;
        }
      });
    },
    // 查询数据字典
    getExtension() {
      getEmployee("extension_core").then((res) => {
        this.extensionData = res.data;
      });
    },
    extensionStatusFormat(row) {
      return this.selectDictLabel(this.extensionData, row.type);
    },
    // 分期明细
    detailsFun(row) {
      this.title = "修改";
      this.form = row;
      this.ExtensionDia = true;
    },
    // 添加
    addFun() {
      this.title = "新增";
      this.form = this.addForm;
      this.ExtensionDia = true;
    },
    // 删除
    deleteFun(row) {
      deleteCore(row.id).then((res) => {
        this.getList();
        if (res.code == 200) {
          this.$message.success(res.message);
        } else {
          this.$message.error(res.message);
        }
      });
    },
    //关闭弹窗
    closeDia(msg) {
      this.getList();
      this.addForm.extensionName = "";
      this.addForm.secondText = "";
      this.addForm.thirdTest = "";
      this.addForm.type = "";
      this.ExtensionDia = msg;
    },
    //分页
    handleCurrentChange(cpage) {
      this.query.pageNo = cpage;
      this.getList();
    },
    handleSizeChange(psize) {
      this.query.pageSize = psize;
      this.getList();
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then(() => {
          done();
          this.addForm.extensionName = "";
          this.addForm.secondText = "";
          this.addForm.thirdTest = "";
          this.addForm.type = "";
        })
        .catch(() => {});
    },
    // 添加修改图标
    addIconFun(row) {
      this.IconDia = true;
      this.IconId = row.id;
      this.imageUrl = row.icon;
    },
    uploadHttp(param) {
      this.uploafFile = param.file;
      this.imageUrl = URL.createObjectURL(param.file);
    },
    subimUpload() {
      let arr = Object.keys(this.uploafFile);
      if (arr.length != 0) {
        let data = new FormData();
        data.append("id", this.IconId);
        data.append("file", this.uploafFile);
        postCoreIcon(data).then((res) => {
          this.IconDia = false;
          this.getList()
          if (res.code == 200) {
            this.$message.success(res.message);
          } else {
            this.$message.error(res.message);
          }
        });
      } else if (this.imageUrl) {
        this.IconDia = false;
      } else {
        this.$message.error("请选择文件");
      }
    },
  },
};
</script>

<style scoped type="less">
::v-deep.avatar-uploader {
  text-align: center;
}
::v-deep.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
::v-deep.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
::v-deep.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
::v-deep .el-table td {
  padding: 10px 0;
}
::v-deep .el-table th {
  padding: 10px 0;
}
.query ::v-deep .el-input__inner {
  height: 32px;
}
.query ::v-deep .el-input__icon {
  line-height: 32px;
}
.query ::v-deep .el-form-item {
  width: 320px;
}
.query ::v-deep .vue-treeselect__control {
  line-height: 30px;
  height: 32px;
}
.query ::v-deep .vue-treeselect__single-value,
.query ::v-deep .vue-treeselect__placeholder {
  line-height: 30px;
}
::v-deep .btn .el-button {
  width: 80px;
  height: 32px;
  line-height: 0;
}
::v-deep .el-table th > .cell {
  font-weight: bold;
  color: #333;
  font-size: 14px;
}
::v-deep .el-table--striped .el-table__body tr.el-table__row--striped td {
  background: rgba(59, 157, 248, 0.1);
}
.box {
  position: relative;
  background: #fff;
  padding: 20px 20px 50px 20px;
}
::v-deep .el-pagination {
  position: absolute;
  margin-top: 20px;
  right: 0;
}
::v-deep .el-pagination__total {
  visibility: hidden;
}
.title {
  position: absolute;
  left: 0;
  margin-top: 15px;
  font-size: 12px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: rgba(51, 51, 51, 1);
  line-height: 21px;
}
</style>
